<template lang="">
    <v-touch @swipeleft="left" @swiperight="right" style="touch-action: pan-y !important;height: 45rem;">
        <div id="MovePublish">
            <div id="puboptions">
                <span :class="{ac:isac}">说说</span>
                <span :class="{ac:!isac}">文章</span>
            </div>
            <div id="publish">
                <div id="pubtalk" v-show="isac" :key="componentKey">
                    <div id="autordata">
                        <div id="talkautor" class="all">
                            <span>作者：</span>
                            <input type="text" v-model="feelingData.autorName">
                        </div>
                        <div id="talkimg" class="all">
                            <span>头像：</span>
                            <span>
                                <li v-for="imgitem in headimgdata" @touchstart="imgchange(imgitem)" ::key="imgitem.id">
                                    <img class="headimg" :src="imgitem.headimgurl">
                                    <label :class="{act :(imgitem.id) == (imgId)}">
                                        <i :class="{acti:(imgitem.id) == (imgId)}"></i>
                                    </label>
                                </li>
                            </span>
                        </div>
                    </div>
                    <textarea rows="8" placeholder="来记录一下你的心情吧！！！" v-model="feelingData.textdata"></textarea>
                    <el-upload action="https://icetea.vip/api/file/uploadImage" list-type="picture-card"
                        class="avatar-uploader" :on-success="asa">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-button :plain="true" @click="pubTalk()">快速发布</el-button>
                    <!-- <button @touchstart="pubTalk()">快速发布</button> -->
                </div>
                <div id="archive" v-show="!isac">
                    <div id="title" class="all">
                        <span>标题：</span>
                        <input type="text" v-model="articleData.inputData">

                    </div>
                    <div id="autor" class="all">
                        <span>作者：</span>
                        <input type="text" v-model="articleData.autorName">

                    </div>
                    <span class="all">请在下面编辑器编辑内容</span>
                    <Editor ref="Editor" :editorheight="editorheight"></Editor>
                    <button id="clear" @touchstart="clear">清空编辑内容</button>
                    <!-- <button id="archivebtn" @touchstart="pubArchive()">快速发布</button> -->
                    <el-button id="archivebtn" :plain="true" @click="pubArchive()">快速发布</el-button>
                </div>

            </div>

        </div>
    </v-touch>
</template>
<script>
    import Editor from "../views/Editor";
    import { v4 as uuidv4 } from 'uuid';
    uuidv4()


    export default {
        data() {
            return {
                editorheight: true,
                isac: true,
                componentKey: 0,
                feelingData: {
                    imageUrl: [],
                    textdata: "",
                    time: "",
                    autorName: "",
                    headimg: "",
                    // uuid:""
                },
                articleData: {
                    textData: "",
                    inputData: '',
                    autorName: '',
                    time: '',
                    // uuid:""
                },
                imgId: "",
                headimgdata: [
                    { headimgurl: require("../assets/images/headerimg02.webp"), id: 1 },
                    { headimgurl: require("../assets/images/headerimg01.webp"), id: 2 },
                    { headimgurl: require("../assets/images/headerimg03.webp"), id: 3 },
                    { headimgurl: require("../assets/images/headerimg04.webp"), id: 4 },
                    { headimgurl: require("../assets/images/headerimg05.webp"), id: 5 }
                ]

            }
        },

        components: {
            Editor
        },
        methods: {

            //测试图片上传
            asa(response) {
                console.log(response)
                this.feelingData.imageUrl.push(response.msg)
                // alert("上传成功！")
            },
            //屏幕左滑
            left() {
                // console.log("左滑")
                this.isac = false

            },
            //屏幕右滑
            right() {
                // console.log("右滑")
                this.isac = true
            },
            //头像图片选择
            imgchange(arr) {
                let newArr = arr
                // console.log(newArr)
                this.imgId = newArr.id
                this.feelingData.headimg = newArr.headimgurl
            },


            //获取当前时间
            getTime() {
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                let time = year + "-" + month + "-" + day
                this.feelingData.time = time
                this.articleData.time = time

            },
            //发表说说
            pubTalk() {
                this.getTime()
                if (this.feelingData.textdata !== "" && this.feelingData.autorName !== "") {
                    // alert("请求前")
                    fetch(process.env.VUE_APP_API_URL + "/feeling", {
                        method: 'post',
                        body: JSON.stringify(this.feelingData),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            return res.json()
                            // console.log(res.json())
                        })
                        .then((data) => {
                            // console.log(data)
                            // alert("请求后") 
                            if (data == "发布成功") {
                                this.$message({
                                    message: '说说发布成功!!!',
                                    type: 'success'
                                });
                                // alert("发布成功!!!")
                                // console.log(this)
                                // this.feelingData.time = ""
                                // this.componentKey += 1;
                                // Object.assign(this.$data.feelingData, this.$options.data().feelingData)   
                            }
                        })
                        .then(()=>{
                            this.$router.push('/MoveIndex/MoveTalk');
                        })
                        .catch((error) => { console.error('Error:', error) })

                } else {
                    alert("请输入作者和内容！！")
                }

            },
            pubArchive() {
                this.getTime()
                // 通过代码获取编辑器内容
                // this.articleData.textData = this.editor.txt.html()
                console.log(this.articleData)
                this.articleData.textData = this.$refs.Editor.textData()
                if (this.articleData.inputData !== "" && this.editorData !== "") {
                    alert("请求前")

                    // console.log("内容不为空！！")
                    fetch(process.env.VUE_APP_API_URL + "/article", {
                        method: 'post',
                        body: JSON.stringify(this.articleData),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            // alert(res.json())
                            return res.json()
                            // console.log(res.json())
                        })
                        .then((data) => {
                            console.log(data)
                            if (data == "发布成功") {
                                this.$message({
                                    message: '文章发布成功!!!',
                                    type: 'success'
                                });
                                // alert("发布成功!!!")
                                // Object.assign(this.$data.articleData, this.$options.data().articleData)
                                // this.$refs.Editor.clear();
                                // this.$router.go(0)
                                // location.reload();
                            }
                        })
                        .then(()=>{
                            this.$router.push('/MoveIndex/MoveTalk');
                        })
                        .catch((error) => { console.error('Error:', error) })

                } else {
                    alert("请输入标题和内容！！")
                }

            },
            //清除编辑器内容
            clear() {
                this.$refs.Editor.clear();
            },
        },
        created() {
            // let bb = uuidv4()
            // this.feelingData.uuid=bb
            // this.articleData.uuid=bb
            // console.log(bb)
        }

    }
</script>
<style>
    /* .kkk::after{
        content: "";
        background: url("../assets/images/logo.png");
        width: 3rem;
        height: 3rem;
        right: -2rem;
        position: absolute;
        background-color: blueviolet;
        z-index: 33;

    } */
    .fff {}


    #MovePublish {
        /* color: white; */
        /* font-size: 12px; */
        /* margin-bottom: 3rem; */
    }

    #puboptions {
        width: 100%;
        display: flex;
        background-color: rgb(53, 152, 233);
        font-size: 1.1rem;
        justify-content: center;

    }

    #puboptions>span {
        display: inline-block;
        width: 47.5%;
        background-color: rgb(53, 152, 233);
        text-align: center;

    }

    .ac {
        font-weight: bold;
        transform: scale(1.1);
        border-bottom: 1px solid red;
        background-color: rgb(53, 152, 233);

    }

    #publish {
        /* background-color: rgb(240, 234, 234); */
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
    }

    #pubtalk {
        width: 97%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */

    }

    #pubtalk>textarea {
        width: 100%;
        height: 10rem;
        margin: 0 auto;
    }

    #pubtalk>button {
        padding: 0;
        width: 5rem;
        height: 2rem;
        background-color: rgb(50, 114, 225);
        border-radius: 0.5rem;
        margin: 0.5rem 0;
        font-size: 1rem;
        font-weight: bold;
        color: rgb(176, 173, 173);

    }


    .avatar-uploader {
        width: 97%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 0.5rem;

    }

    .avatar-uploader>.el-upload {

        width: 5rem;
        height: 5rem;
        background-color: yellow;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .el-icon-plus {
        width: 2rem;
        height: 2rem;
        position: relative;
    }

    .el-icon-plus:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .el-upload-list {
        width: 100%;
        /* display: flex; */
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

    }

    .el-upload-list--picture-card .el-upload-list__item {
        width: 5rem;
        height: 5rem;
    }

    #archive {
        width: 97%;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        font-size: 1rem;
    }

    #archive>span {
        font-size: 0.8rem;
    }

    #title {
        margin: 0.3rem 0;
        font-size: 1rem;
        display: flex;
        align-items: center;
    }

    #archive input {

        font-size: 1.2rem;
    }

    #autor {
        display: flex;
        align-items: center;
        font-size: 1rem;

    }

    .text /deep/ {
        min-height: 30%;
    }

    #text-container {
        height: 5rem;
    }

    #autor>input {
        width: 50%;

    }

    .all {
        padding-left: 0.3rem;
    }

    #clear {
        width: 28%;
    }

    #archivebtn {
        background-color: rgb(50, 114, 225);
        padding: 0;
        margin: 1rem auto;
        font-weight: bold;
        color: rgb(176, 173, 173);
        right: 0;
        left: 0;
        display: block;
        width: 5rem;
        height: 2rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        /* margin-bottom: 6rem; */
    }

    .headimg {
        width: 3rem;
        height: 3rem;
    }

    #autordata {
        width: 100%;
        font-size: 1rem;
    }

    #talkimg {
        margin: 0.5rem auto;
        display: flex;
        /* align-items: center; */
        /* justify-content: center; */
    }

    #talkimg>span:last-child {
        display: flex;
    }

    #talkimg>span>li {
        margin-right: 0.2rem;
        position: relative;
    }

    #talkimg>span>li>.act {
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(202, 184, 184, 0.8);
        z-index: 2;
    }

    #talkimg>span>li>label>.acti {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1.5rem;
        height: 1.5rem;
        background-image: url("../assets/images/gou.png");
        background-size: 100% 100%;

    }

    #talkautor>input {
        height: 1.5rem;
    }
</style>